<template>
	
    <view
        class="message-image"
        @longpress="showControl"
        @tap.stop="handlePreviewImage"
        ref="mes_content"
    >
        <!-- :style="{height:imageHeight, width:imageWidth}" -->
        <image
            :src="message.payload.extension"
            :style="{ height: imageHeight, width: imageWidth }"
            class="img"
            :class="['content-' + message.flow]"
        ></image>
    </view>
</template>

<script lang="ts">
import {
    defineComponent,
    watchEffect,
    reactive,
    toRefs,
    onMounted,
    ref,
} from "vue";
import { wait } from '@/utils/utils'

export default defineComponent({
    props: {
        data: {
            type: Array,
            default: () => {
                return [];
            },
        },
        messageData: {
            type: Object,
            default: () => {
                return {};
            },
        },
        keyboardHeight: {
            type: Number,
            default: () => {
                return 0;
            },
        },
    },
    setup(props: any, ctx: any) {
        const data = reactive({
            imageInfo: [] as any,
            imageHeight: 0 as (number | string),
            imageWidth: 0 as (number | string),
            message: {} as any,
        });

        watchEffect(() => {
            // 等比例计算图片的 width、height
            const DEFAULT_MAX_SIZE = 170;
            let imageWidth = 0;
            let imageHeight = 0;
            data.message = props.messageData;
			uni.getImageInfo({
				src: data.message.payload.extension, // 图片的路径  
				success: function (res:any){
					data.imageInfo = res;
					
					if (data.imageInfo.width >= data.imageInfo.height) {
					    imageWidth = DEFAULT_MAX_SIZE;
					    imageHeight =
					        (DEFAULT_MAX_SIZE * data.imageInfo.height) /
					        data.imageInfo.width;
					} else {
					    imageWidth =
					        (DEFAULT_MAX_SIZE * data.imageInfo.width) /
					        data.imageInfo.height;
					    imageHeight = DEFAULT_MAX_SIZE;
					}
					data.imageWidth = imageWidth + "px";
					data.imageHeight = imageHeight + "px";
				}
			});
        });

        const stopPop = (e:any)=>{
            e.preventDefault();
            e.stopPropagation();
        }

        const mes_content = ref(null);

        // todo 优化 查看大图重新加载图片
        const handlePreviewImage = async (e:any) => {
            e.preventDefault();
            e.stopPropagation();
            uni.hideKeyboard();
            let refPos = null;
            
			if(props.keyboardHeight){
				await wait(300);
			}


            await new Promise((callback) => {
                const dom = weex.requireModule("dom");
                dom.getComponentRect(mes_content.value, (e) => {
                    refPos = e.size;
                    callback(e);
                });
            });
            const obj = {
                refPos,
                message: data.message,
            };
            const param = {
				/*
                startInfo:[{
					width:data.imageWidth,
					height:data.imageHeight
				}],
				*/
				startInfo:[refPos],
                //data: refPos, //图片的初始大小与位置
                url: data.message.payload.extension, //当前图片地址
                index:0,
                urls: [data.message.payload.extension], //预览集合图片地址
            };

             uni.$emit('previewImage',param);

            // uni.previewImage({
            //     current: props.data.info[0].url,
            //     // 当前显示图片的http链接
            //     urls: [props.data.info[0].url],
            // });
        };
        const showControl = async (e:any) => {
            e.preventDefault();
            e.stopPropagation();
            let refPos = null;
            await new Promise((callback) => {
                const dom = weex.requireModule("dom");
                dom.getComponentRect(mes_content.value, (e:any) => {
                    refPos = e.size;
                    callback(e);
                });
            });
            const obj = {
                refPos,
                message: data.message,
            };
            uni.$emit('longPressLock')
            uni.$emit("showControl", obj);
        };

        return {
            ...toRefs(data),
            handlePreviewImage,
            showControl,
            mes_content,
            stopPop,

        };
    },
});
</script>
<style lang="scss" scoped>
.message-image {
    position: relative;
}
.content {
    &-in {
        border-radius: 6px;
    }
    &-out {
        border-radius: 6px;
    }
}
</style>
